<template>
  <div class="home">
    <mu-container class="load-more-wrap">
      <mu-sub-header><span class="more" @click="moreCase"></span></mu-sub-header>
      <div style="padding-top: 1rem">
        <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()">
          <mu-paper style="padding: 0 0 0 0" v-for="(item, index) in caseList" v-bind:key="index" :z-depth="0">
            <mu-card style="width: 100%;height: 100%; margin: 0 auto;" @click="openPage(item.id)">
              <mu-card-header :title="item.modelName" :sub-title="item.modelCode">
                <mu-avatar slot="avatar" color="blueGrey200">
                  M
                </mu-avatar>
              </mu-card-header>
              <mu-card-media>
                <img :src="item.qrUrl">
              </mu-card-media>
            </mu-card>
            <!--<mu-grid-list v-show="caseShow" :key="index" class="grid-list-y" :cols="1"-->
            <!--@click="openPage(item.id)">-->
            <!--<mu-grid-tile :key="index">-->
            <!--<img class="img" :src="item.url ? item.url : (item.qrUrl? item.qrUrl:carouselImg4)">-->
            <!--</mu-grid-tile>-->
            <!--<mu-list style="margin: -1.3rem 0 0.5rem 0;" textline="three-line">-->
            <!--<mu-list-item avatar :ripple="false" button>-->
            <!--<mu-list-item-content>-->
            <!--<mu-list-item-title>{{item.modelName}}</mu-list-item-title>-->
            <!--<mu-list-item-sub-title>{{item.modelCode}}</mu-list-item-sub-title>-->
            <!--</mu-list-item-content>-->
            <!--</mu-list-item>-->
            <!--</mu-list>-->
            <!--</mu-grid-list>-->
          </mu-paper>
        </mu-load-more>
        <mu-sub-header v-show="!caseShow" style="text-align: center">暂无</mu-sub-header>
      </div>
    </mu-container>
  </div>
</template>
<script>
  import carouselImg1 from '../../assets/images/carousel1.png';
  import carouselImg2 from '../../assets/images/carousel2.png';
  import carouselImg3 from '../../assets/images/carousel3.png';
  import carouselImg4 from '../../assets/images/carousel4.png';
  import caseImg from '../../assets/images/case.png';

  export default {
    name: 'home',
    data() {
      return {
        caseNoticeShow: false,
        myNoticeShow: false,
        noticeShow: false,
        caseShow: false,
        token: '',
        title: 1,
        num: 10,
        noticeList: [],
        caseNoticeList: [],
        myNoticeList: [],
        refreshing: false,
        caseList: [],
        loading: false,
        carouselImg1,
        carouselImg2,
        carouselImg3,
        carouselImg4,
        caseImg
      }
    },
    methods: {
      refresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.listData();
        }, 1000)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.num += 10;
          this.listData();
          this.loading = false;
        }, 1000)
      },
      // goNoticeInfo(id) {
      //   this.$router.push({name: 'noticeInfo', query: {id: id}});
      // },
      // moreMyNotices() {
      //   this.$router.push({name: "userNotices", query: {active: 0}});
      // },
      // moreCaseNotices() {
      //   this.$router.push({name: "userNotices", query: {active: 1}});
      // },
      // moreNotices() {
      //   this.$router.push({name: "noticeList"});
      // },
      moreCase() {
        this.$router.push({name: "caseList"});
      },
      openPage(id) {
        this.$router.push({name: 'modelInfo', query: {id: id}});
      },
      // listCaseNotice() {
      //   const _self = this;
      //   let listPO = {
      //     size: this.num,
      //     current: 1,
      //     params: [{
      //       field: "fn.release_time",
      //       operator: "desc",
      //       value: ''
      //     }]
      //   };
      //   this.postRequest("/notice/listByCase", listPO).then(res => {
      //     if (res.code === 200) {
      //       if (res.data) {
      //         _self.caseNoticeList = res.data.records;
      //         if (_self.caseNoticeList && _self.caseNoticeList.length > 0) {
      //           _self.caseNoticeShow = true;
      //         } else {
      //           _self.caseNoticeShow = false;
      //         }
      //       }
      //     }
      //   });
      // },
      // listMyNotice() {
      //   const _self = this;
      //   let listPO = {
      //     size: this.num,
      //     current: 1,
      //     params: [{
      //       field: "fn.release_time",
      //       operator: "desc",
      //       value: ''
      //     }]
      //   };
      //   this.postRequest("/notice/listByUser", listPO).then(res => {
      //     if (res.code === 200) {
      //       if (res.data) {
      //         _self.myNoticeList = res.data.records;
      //         if (_self.myNoticeList && _self.myNoticeList.length > 0) {
      //           _self.myNoticeShow = true;
      //         } else {
      //           _self.myNoticeShow = false;
      //         }
      //       }
      //     }
      //   });
      // },
      // listNotice() {
      //   const _self = this;
      //   let listPO = {
      //     size: this.num - 5,
      //     current: 1,
      //     params: [{
      //       field: "fn.release_time",
      //       operator: "desc",
      //       value: ''
      //     }]
      //   };
      //   this.postRequest("/openNotice/list", listPO).then(res => {
      //     if (res.code === 200) {
      //       if (res.data) {
      //         _self.noticeList = res.data.records;
      //         if (_self.noticeList && _self.noticeList.length > 0) {
      //           this.noticeShow = true;
      //         } else {
      //           this.noticeShow = false;
      //         }
      //       }
      //     }
      //   });
      // },
      listData() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fh_declare_model.model_status",
            operator: "=",
            value: this.title
          }]
        };
        this.postRequest("/model/list", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.caseList = res.data.records;
              if (_self.caseList && _self.caseList.length > 0) {
                this.caseShow = true;
              }
            }
          }
        });
      },
      visit() {
        this.postRequest("/referral/visit").then(res => {
        });
      },
      goRules() {
        this.$router.push({name: 'activityRules'})
      },
      goAbout() {
        this.$router.push({name: 'about'})
      }
    },
    mounted: function () {
      this.listData();
    },
    created() {
      let referral = this.$route.query.referral;
      if (referral) {
        this.setStore("registerToken", referral);
      }
      this.token = this.getStore("accessToken");
    },
    components: {}
  }
</script>

<style scoped lang="less">

  .home {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: auto;
    height: 100%;
    /*background-color: #ffffff;*/
  }

  .img {
    height: 100%;
    max-height: 300px;
    width: 100%;
    max-width: 300px;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    /*position: relative;*/
  }

  .load-more-wrap {
    /*padding: 5px;*/
    width: 100%;
    height: 92%;
    /*display: flex;*/
    overflow: scroll;
    /*flex-direction: column;*/

    .mu-appbar {
      width: 100%;
    }
  }

  .grid-list-x {
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .grid-list-y {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .more {
    float: right;
    margin-right: 1.3rem
  }
</style>
